<template>
  <view class="tab-wrap">
		<scroll-view scroll-x class="scrol-wrap">
			<view class="item" v-for="(item,index) of list" :key="index" @click="handlerChange(index)">
				<image :src="item.img"></image>
				<view class="desc" :class="{active: currentIndex === index}">{{item.desc}}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
  name:'tab',
  props: {
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
			list:[
				{
					desc: '凉菜',
					img: '/static/images/mess/cold.png'
				},
				{
					desc: '热菜',
					img: '/static/images/mess/hot.png'
				},
				{
					desc: '水果',
					img: '/static/images/mess/fruit.png'
				},
				{
					desc: '零食',
					img: '/static/images/mess/snacks.png'
				},
				{
					desc: '饮品',
					img: '/static/images/mess/drink.png'
				}
			]
    }
  },
  mounted () {
    const _this = this
    const query = uni.createSelectorQuery().in(this).select('.tab-wrap')
    query.boundingClientRect(data => {
      const height = data.top + data.height
      this.$emit('calcHeight', height)
    }).exec();
  },
	methods: {
		handlerChange(index) {
			this.$emit('update:currentIndex', index)
		}
	}
}

</script>
<style lang='scss' scoped>
	.tab-wrap{
		padding-top: 20upx;
    padding-bottom: 40upx;
    box-sizing: border-box;
	}
	.scrol-wrap{
		white-space: nowrap;
		padding-left: 46upx;
		box-sizing: border-box;
		.item{
			display: inline-block;
			margin-right: 90upx;
			.desc{
        width: 60upx;
        text-align: center;
				font-size: 30upx;
				line-height: 30upx;
				color: #999;
				font-weight: bold;
			}
      .active{
        color: #2C6DD2;
      }
      image{
        width:60upx;
				height:60upx;
      }
			&:nth-last-of-type(1){
				margin-right: 0;
			}
		}
	}
</style>